<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
  </head>

  <body>
  <div>
    
    <div ng-include="headerInclude"></div>   
    <div ng-controller="Apiman.ConsumerApisController" class="page container" data-field="page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div class="row">
        <div class="col-md-12">
          <ol class="breadcrumb" data-field="breadcrumb">
            <li><a id="bc-home" href="{{ pluginName }}/"><i class="fa fa-home fa-fw"></i><span apiman-i18n-key="home">Home</span></a></li>
            <li class="active"><i class="fa fa-search fa-fw"></i><span apiman-i18n-key="apis">APIs</span></li>
          </ol>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <h1 class="consumer-top-header" apiman-i18n-key="find-api">Find an API</h1>
        </div>
        <div class="col-md-6 no-phone">
          <p class="description" apiman-i18n-key="find-api-description">Use this page to find APIs you wish to consume.  Use the various search options to find APIs, then review them and eventually create Contracts to them.</p>
        </div>
        <div class="col-md-6">
          <form ng-submit="searchSvcs(apiName)">
            <input id="apiman-search" ng-model="apiName" type="text" class="apiman-form-control form-control input-search" apiman-i18n-key="searchfor-apis" placeholder="Search by API name or keyword..."></input>
            <button id="search-btn" type="submit" class="btn btn-default btn-search" apiman-i18n-key="search" data-field="searchButton">Search</input>
          </form>
        </div>
        <div class="col-md-12">
          <hr />
        </div>
      </div>
      
      <!-- Search results -->
      <div class="row browse-items">
        <div class="col-md-12">

          <div class="apiman-no-content container-fluid" ng-hide="apis.length > 0">
            <div class="row">
              <div class="col-md-9">
                <p apiman-i18n-key="consumer-no-apis-found" class="apiman-no-entities-description">No APIs found. Either no APIs matched the query or you haven't queried yet!</p>
              </div>
              <div class="col-md-3"></div>
            </div>
          </div>

          <div ng-show="apis.length > 0">
            <div class="count">
              Found {{ apis.length}} matching APIs.
            </div>

            <div class="item card" ng-repeat="api in apis">
              <div class="title">
                <i class="fa fa-puzzle-piece icon"></i><a href="{{ pluginName }}/browse/orgs/{{api.organizationId}}">{{ api.organizationName }}</a>
                <span apiman-i18n-skip> / </span>
                <b><a href="{{ pluginName }}/browse/orgs/{{api.organizationId}}/{{api.id}}">{{ api.name }}</a></b>
              </div>
              <div class="description" title="{{ api.description }}">{{ api.description }}</div>
            </div>
          </div>

        </div>
      </div>

    </div> <!-- /container -->
  </div>
  </body>
</html>
